<!--
 * @Author: liaoxing
 * @Date: 2022-01-14 18:20:21
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-01-17 09:30:11
 * @Description: liaoxing created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\quote\params\collapsItem\fixture.vue
-->
<template>
  <div class="collapsItemFixture">
    <el-table :data="fixtureData" border style="100%">
      <el-table-column type="index" label="序号" :align="'center'" width="50"></el-table-column>
      <el-table-column label="物料编码" width="250">
        <template slot-scope="scope">
          <template v-if="fixtureIndex == scope.$index">
            <el-select
              v-model="fixtureData[scope.$index]"
              filterable
              remote
              reserve-keyword
              :value-key="'materialCode'"
              :name="'materialCode'"
              placeholder="请输入物料编码"
              :remote-method="remoteFixtureMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in fixtureOptions"
                :key="item.materialCode"
                :label="item.materialCode"
                :value="item"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ scope.row.materialCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.materialName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template slot-scope="scope">
          <template v-if="fixtureIndex == scope.$index">
            <el-input
              v-model="scope.row.qty"
              placeholder="请输入数量"
              @blur="computedFixturePrice(scope.row, scope.$index)"
            ></el-input>
          </template>
          <span v-else>{{ scope.row.qty }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总价">
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="说明">
        <template slot-scope="scope">
          <template v-if="fixtureIndex == scope.$index">
            <el-input v-model="scope.row.remark" placeholder="请输入说明"></el-input>
          </template>
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <template v-if="fixtureIndex == scope.$index">
            <span
              class="jstarfont jstar-baocun finger color-blue"
              @click="saveItem('fixture')"
            ></span>
            <span
              style="margin-left: 10px"
              class="jstarfont jstar-guanbi finger color-blue"
              @click="cancelEdit(scope.$index, 'fixture')"
            ></span>
          </template>
          <template v-else>
            <span
              class="jstarfont jstar-bianji1 finger color-blue"
              @click="openEditItem(scope.$index, scope.row, 'fixture')"
            ></span>
            <el-popconfirm
              title="确定删除改行吗？"
              @confirm="deleteItem(scope.$index, 'fixture')"
            >
              <span
                slot="reference"
                style="margin-left: 10px"
                class="jstarfont jstar-shanchutianchong finger color-blue"
              ></span>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      style="margin-top: 16px"
      icon="el-icon-plus"
      @click="addItem('fixture')"
    >添加行</el-button>
  </div>
</template>

<script>
export default {
  name: "",
  props: [''],
  data () {
    return {
      fixtureIndex: null,
      fixtureEditItem: '',
      loading: false,
      fixtureOptions: [],
      fixtureList: [],
      fixtureData: [],
    }
  },
  async created () {
    // await this.getMasterMaterial1()
    await this.getFixtureList()
  },
  methods: {
    cancelBtn() {
      this.$confirm('确定取消填写，返回上一页吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$router.push({ path: '/quote/index' })
      })
    },
    addFloatNum(num1, num2) {
      var sq1, sq2, m
      try {
        sq1 = num1.toString().split('.')[1].length
      } catch (e) {
        sq1 = 0
      }
      try {
        sq2 = num2.toString().split('.')[1].length
      } catch (e) {
        sq2 = 0
      }
      m = Math.pow(10, Math.max(sq1, sq2))
      return (num1 * m + num2 * m) / m
    },
    /* 计算工治具 */
    computedFixturePrice(item, index) {
      this.$set(
        this.fixtureData[index],
        'amount',
        (item.price * 10000 * (item.qty * 1)) / 10000
      )
    },
    remoteFixtureMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.fixtureOptions = this.fixtureList.filter((item) => {
            return (
              item.materialCode.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.fixtureOptions = []
      }
    },
    /* 查询工治具清单 */
    getMasterMaterial1() {
      return new Promise((resolve) => {
        this.$quote
          .getFixture0(this.$route.query.id)
          .then((res) => {
            if (res.code == 200) {
              this.fixtureData = res.data.rows
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    /* 查询工治具 */
    getFixtureList() {
      return new Promise((resolve) => {
        this.$quote
          .getFixtureList(this.$route.query.id)
          .then((res) => {
            if (res.code == 200) {
              this.fixtureList = res.data.rows
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    openEditItem(index, item, propsName) {
      this[propsName + 'EditItem'] = JSON.stringify(item)
      this[propsName + 'Index'] = index
    },
    cancelEdit(index, propsName) {
      this.fixtureData[index] = JSON.parse(
        this[propsName + 'EditItem']
      )
      this.$nextTick(() => {
        this[propsName + 'Index'] = null
      })
    },
    saveItem(propsName) {
      this[propsName + 'Index'] = null
    },
    deleteItem(index, propsName) {
      this.fixtureData.splice(index, 1)
    },
    addItem(propsName) {
      let temp = {
        fixture: {
          materialCode: '',
          name: '',
          unitPrice: '',
          materialNum: '',
          amount: '',
          remark: '',
        },
      }
      this.fixtureData.push(temp[propsName])
      this.$nextTick(() => {
        this[propsName + 'EditItem'] = JSON.stringify(temp[propsName])
        this[propsName + 'Index'] = this.fixtureData.length - 1
      })
    }
  }
}
</script>

<style lang="less">
.collapsItemFixture{

}
</style>